<template>
  <div class="wrap">
    <header>
      <span @click="go()">&lt;</span>
      <p>团购</p>
    </header>
    <main>
      <div class="Tuan">
        <dl v-for="(item,index) in list" :key="index" class="list">
          <dt @click="toTuandetail(item)">
            <img :src="item.img" alt />
          </dt>
          <dd>
            <h4>{{item.title}}</h4>
            <p>{{item.location}}</p>
            <div class="t11">
              <p>
                <label>活动时间:</label>
                <span>{{item.date}}</span>
              </p>
              <p>
                <label>已报名:</label>
                <span>{{item.id}}人</span>
              </p>
            </div>
            <div class="t12">
              <!-- <van-switch v-model="checked" size="20px" /> -->
              <span></span>
              <div>
                <span class="color" @click="toKaiTuan(item)">开团</span>
                <span class="color1" @click="del(item.id)">删除</span>
              </div>
            </div>
          </dd>
        </dl>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      list: [],
      checked: true
    };
  },
  created() {
    this.TuanList();
  },
  methods: {
    go() {
      this.$router.go(-1);
    },
    TuanList() {
      axios({
        url: "/api/getList",
        method: "post"
      }).then(res => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    del(id) {
      axios({
        url: "/api/delList",
        method: "post",
        data: { id }
      }).then(res => {
        // console.log(res);
        this.TuanList();
      });
    },

    //详情
    toTuandetail(item) {
      this.$router.push(`/tuandetail/${item.id}`);
    },

    //开团
    toKaiTuan(item) {
      this.$router.push(`/kaituan/${item.id}`);
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  width: 100%;
  height: 50px;
  display: flex;
  line-height: 50px;
  align-items: center;
  background: rgb(56, 121, 240);
  padding: 15px;
  color: #fff;
  p {
    padding-left: 38%;
  }
}
main {
  width: 100%;
  flex: 1;
  overflow-y: scroll;
  .list {
    margin: 15px;
    dt img {
      width: 100%;
      height: 210px;
    }
    dd {
      h4 {
        padding: 5px 0;
        font-size: 16px;
      }
      p {
        font-size: 15px;
      }
      .t11 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 5px 0;
      }
      .t12 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 5px 0;
        .color {
          width: 40px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          border-radius: 3px;
          padding: 2px 5px;
          background: rgb(104, 155, 250);
          margin-right: 5px;
        }
        .color1 {
          width: 40px;
          height: 20px;
          line-height: 20px;
          font-size: 14px;
          border-radius: 3px;
          padding: 2px 5px;
          background: #ebe9e9;
        }
      }
    }
  }
}
</style>